<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <style media="screen">
    #box1 {
      width: 300px;
      height: 300px;
      background: blueviolet;
    }
    #box2 {
      width: 200px;
      height: 200px;
      background: aquamarine;
    }
    #box3 {
      width: 100px;
      height: 100px;
      background: tomato;
    }
    div {
      overflow: hidden;
      margin: 50px auto;
    }
  </style>
  <body>
    <div id="box1">
      <div id="box2">
        <div id="box3"></div>
      </div>
    </div>
  </body>
  <script type="text/javascript">
    function sayBox3(e) {
      // 阻止事件冒泡
      e.stopPropagation();
      console.log("你点了最里面的box");
    }
    function sayBox2(e) {
      e.stopPropagation();
      console.log("你点了最中间的box");
    }
    function sayBox1(e) {
      e.stopPropagation();
      console.log("你点了最外面的box");
    }
    // 事件监听
    document.getElementById("box3").addEventListener("click", sayBox3);
    document.getElementById("box2").addEventListener("click", sayBox2);
    document.getElementById("box1").addEventListener("click", sayBox1);
  </script>
</html>
